<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: header"></head>
<body>
<div style="padding: 15px;">
    <div class="layui-inline">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-inline">
            <input type="text" id="deptName" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i>
    </button>
</div>
<div>
    <table class="layui-hidden" id="deptTree" lay-filter="dept"></table>
</div>
<div th:include="include :: footer"></div>

<script type="text/html" id="toolbarTable">
    <button class="layui-btn layui-btn-sm" shiro:hasPermission="system:dept:add"
            onclick="openWindow('添加部门信息','/venus/system/dept/add/100')"><i
            class="layui-icon"></i>添加
    </button>
</script>

<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    var sysUrl = '/venus/system/dept';
    layui.config({
        base: '/venus/layui/extend/'
    }).extend({
        treeGrid: 'treeGrid'
    }).use(['jquery', 'treeGrid'], function () {
        var treeGrid = layui.treeGrid, $ = layui.jquery;
        treeGrid.render({
            id: 'deptTree'
            , elem: '#deptTree'
            , idField: 'deptId'
            , height: 'full-100'
            , url: sysUrl + '/list'
            , toolbar: '#toolbarTable'
            , cellMinWidth: 100
            , treeId: 'deptId'//树形id字段名称
            , treeUpId: 'parentId'//树形父id字段名称
            , treeShowName: 'deptName'//以树形式显示的字段
            , cols: [
                [
                    {field: 'num', width: 50, title: '序号', type: 'numbers'},
                    {field: 'deptName', title: '部门名称'},
                    {field: 'orderNum', title: '排序'},
                    {
                        field: 'status', title: '状态', templet: function (d) {
                            if ("1" == d.status) {
                                return "停用";
                            } else if ("0" == d.status) {
                                return "正常";
                            }
                        }
                    },
                    {field: 'createTime', title: '创建时间'},
                    {fixed: 'right', title: '操作', toolbar: "#toolbar"}
                ]
            ]
            , page: true
        });

        treeGrid.on('tool(dept)', function (obj) {
            delAndEdit(sysUrl, obj, 'dept');
        });
        //搜索
        $('.layui-form .layui-btn').on('click', function () {
            treeGrid.reload('deptTree', {
                where: {
                    deptName: $("#deptName").val()
                }
            });
        });
    });
</script>
</body>
</html>